<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
      name="viewport"
    />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <title>剑桥英语</title>
    <script rel="stylesheet" src="./common/js/flexible.js"></script>
    <link rel="stylesheet" href="./common/css/reset.css" />
    <link rel="stylesheet" href="./lib/video-js.min.css" />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/course-play.css" />
  </head>
  <body>
    <div>
      <div id="header"></div>

      <div class="banner">
        <img src="./img/banner.png" alt="" class="banner-img" />
      </div>

      <div class="describe-t">
        <div class="user flex row-right">
          <span class="username">你好，Agentone</span>
          <a href="./edit-password.html" class="user-edit br">修改密码</a>
          <a href="javascript:;" class="user-edit signout">退出</a>
        </div>
      </div>

      <div class="describe">
        <h1>剑桥领思备考课程</h1>
        <h2>第二课 标题标题标题标题标题标题标题标题标题标题</h2>
        <div class="describe-ft flex">
          <span class="sp1">课时：16：30</span>
          <span class="sp2">学习次数：6966</span>
        </div>
      </div>

      <div class="myvideo">
        <video
          id="video"
          class="video-js vjs-default-skin vjs-big-play-centered customvideo"
          controls
          preload="auto"
          webkit-playsinline="true"
          playsinline="true"
          x5-video-player-type="h5"
          mtt-playsinline="true"
          poster="http://video.chinatv-net.com/linguaskill/sample.png"
        >

          <source src="http://video.chinatv-net.com/linguaskill/CN_Linguaskill_Launch_Video_With_VO_2.mp4" type="video/mp4" />
          <!--<source src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4" type="video/mp4" />-->
          <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser
            that
            <a href="http://videojs.com/html5-video-support/" target="_blank">
              supports HTML5 video
            </a>
          </p>
        </video>
      </div>

      <div class="inner">
        <div class="inner-p">
          <!-- 如果要分段 需要使用以下结构包裹 -->
          <p class="paragraph">剑桥英语青少版扩展阅读系列丛书引进并改编自Success with Reading英文原版，配套合剑桥英语青少版的进阶式补充阅读教程，每本教程由100篇阅读文章和精心选配的图片、实用的练习题组成。阅读材料全部取自原汁原味的英语文章，学生可以从中学习到地道的英语句法结构和表达。</p>
          <p class="paragraph">剑桥英语青少版扩展阅读系列丛书引进并改编自Success with Reading英文原版，配套合剑桥英语青少版的进阶式补充阅读教程，每本教程由100篇阅读文章和精心选配的图片、实用的练习题组成。阅读材料全部取自原汁原味的英语文章，学生可以从中学习到地道的英语句法结构和表达。</p>
        </div>
        <div class="more flex row-center">
          <span class="more-msg">展开详情</span>
          <img src="./img/course-list/down-arrow.png" class="arrow-img" alt="" />
        </div>
      </div>

      <div class="carousel">
        <a class="swiper-button-prev-custom hover-class"></a>
        <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div style="padding: 0.2rem">
                <div class="card flex col-top">
                  <div class="course-cover">
                    <img
                      src="./img/course-list/course-cover-img.png"
                      class="course-cover-img"
                      alt=""
                    />
                  </div>
                  <div class="card-content">
                    <div class="title">第一课 标题标题标题标标题标题标题标题标题</div>
                    <div class="desc flex row-between">
                      <span>课时：16:30</span>
                      <span>学习次数：6966</span>
                    </div>
                    <a href="course-play.html" class="play-study flex row-center hover-class">
                      <span>开始学习</span>
                      <img src="./img/course-list/player.png" class="player" alt="" />
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="swiper-slide">
              <div style="padding: 0.2rem">
                <div class="card flex col-top">
                  <div class="course-cover">
                    <img
                      src="./img/course-list/course-cover-img.png"
                      class="course-cover-img"
                      alt=""
                    />
                  </div>
                  <div class="card-content">
                    <div class="title">第一课 标题标题标题标标题标题标题标题标题</div>
                    <div class="desc flex row-between">
                      <span>课时：16:30</span>
                      <span>学习次数：6966</span>
                    </div>
                    <a href="course-play.html" class="play-study flex row-center hover-class">
                      <span>开始学习</span>
                      <img src="./img/course-list/player.png" class="player" alt="" />
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a class="swiper-button-next-custom hover-class"></a>
        <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
      </div>

      <div class="card-win">
        <div class="content" style="background-image: url('./img/content-2.png')">
          <h2 class="title flex">
            <span class="title-msg-zh">报名考试</span>
            <span class="title-msg-en">Candidate Registration</span>
          </h2>
          <div class="btn-group flex-col row-center" style="padding-left: 0.38rem; height: 3.12rem">
            <a href="./individual-registration.html" class="btn">个人报名</a>
            <a href="./mechanism-registration.html" class="btn">机构报名</a>
          </div>
        </div>

        <div
          class="content"
          style="background-image: url('./img/content-1.png'); margin-top: 0.82rem"
        >
          <h2 class="title flex">
            <span class="title-msg-zh">我要咨询</span>
            <span class="title-msg-en">Consulting</span>
          </h2>
          <div
            class="btn-group flex-col row-center col-bottom"
            style="padding-right: 0.5rem; height: 3.12rem"
          >
            <a href="./common-problem.html" class="btn">考试常见问题FAQ</a>
            <a href="javascript:;" class="btn">在线课程咨询</a>
            <a href="./business-cooperation.html" class="btn">商务合作</a>
          </div>
        </div>
      </div>

      <div id="footer"></div>

      <div class="signout-layer flex row-center">
        <div class="signout-layer-bg"></div>
        <div class="layer-content">
          <img src="./img/close.png" class="close-img" alt="" />
          <div class="title">您即将退出本次登录</div>
          <div class="layer-group flex row-between">
            <a href="javascript:;" class="layer-group-btn btn-cancel">取消</a>
            <a href="javascript:;" class="layer-group-btn">确定</a>
          </div>
        </div>
      </div>
    </div>
    <script src="./common/js/jquery-2.1.1.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"></script>
    <script src="./lib/video.min.js"></script>
    <script src="./common/js/index.js"></script>
    <script src="./js/course-play.js"></script>
    <script>
      function debounce(fn, wait) {
        var timer = null;
        return function () {
          var context = this
          var args = arguments
          if (timer) {
            clearTimeout(timer);
            timer = null;
          }
          timer = setTimeout(function () {
            fn.apply(context, args)
          }, wait)
        }
      }

      function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while(n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr],{type:mime});
      };

      function getCover() {
        var $video = $('.video-js');
        var video = $video.find('video')[0]
        var scale = 0.8;
        var canvas = document.createElement("canvas");
        canvas.width = $video.outerWidth() * scale;
        canvas.height = $video.outerHeight() * scale;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        var imageData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height)
        console.log(imageData)
        var imgSrc = canvas.toDataURL("image/png");
        console.log(imgSrc)
        console.log(dataURLtoBlob(imgSrc))
        // $(video).attr('poster', imgSrc)
      }

      $(function () {
        var player = videojs(
          'video',
          {
            controlBar: {
              volumePanel: { inline: false }
            },
            playbackRates: [0.5, 1, 1.5, 2],
            preload: 'auto',
            fluid: true,
            autoplay: true
          },
          function () {
            var _player = this;

            // _player.on('play', function () {
            //   var playBtn = $('.vjs-big-play-button');
            //   if (playBtn.is(':visible')) {
            //     playBtn.hide();
            //   }
            //   videoState = 'play';
            // });
            //
            // _player.on('pause', function () {
            //   var playBtn = $('.vjs-big-play-button');
            //   if (playBtn.is(':hidden')) {
            //     playBtn.show();
            //   }
            //   videoState = 'pause';
            // });

            _player.on('loadeddata', function () {
              // getCover()
            })

            _player.on('play', debounce(
              function () {
                if (!_player.paused()) {
                  var playBtn = $('.vjs-big-play-button');
                  if (playBtn.is(':visible')) {
                    playBtn.hide();
                  }
                  videoState = 'play';
                }
              },
              300
            ));

            _player.on('pause', debounce(
              function () {
                if (_player.paused()) {
                  var playBtn = $('.vjs-big-play-button');
                  if (playBtn.is(':hidden')) {
                    playBtn.show();
                  }
                  videoState = 'pause';
                }
              },
              300
            ));

            // $(video).attr('poster', imgSrc)


            _player.play();
          }
        );

        // 解决微信端视频不能自动播放问题
        document.addEventListener(
          'WeixinJSBridgeReady',
          function () {
            player.play();
          },
          false
        );

        // var newbtn = document.createElement('btn');
        // newbtn.innerHTML = '<div class="vjs-volume-panel vjs-control speedside"><button class="vjs-mute-control vjs-button vjs-vol-3 " type="button"><span id="speed-video">1X</span></button><div class="vjs-volume-control vjs-control vjs-volume-vertical video-bar" id="speedtab"></div></div>';
        // var controlBar = document.getElementsByClassName('vjs-control-bar')[0];
        // var insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];
        //
        // controlBar.insertBefore(newbtn, insertBeforeNode);
        //
        // //生成倍速选项、添加点击事件、增加选中样式
        // for (var i = 0, j = 0.5; i < 4; i++) {
        //   (function () {
        //     var newchoose = document.createElement('span');
        //     var newtext = document.createTextNode(j + 'x');
        //     newchoose.appendChild(newtext);
        //     newchoose.className = 'speed';
        //     document.getElementById("speedtab").appendChild(newchoose);
        //     newchoose.onclick = function () {
        //       player.playbackRate(j - 0.5);
        //       document.getElementById('speed-video').innerHTML = j-0.5 + 'x';
        //       var arrs = document.getElementsByClassName('speed');
        //       for (var k = 0; k < arrs.length; k++) {
        //         arrs[k].className = 'speed';
        //       }
        //       this.className = 'speed speedsidechoose';
        //     };
        //     j += 0.5;
        //   })(i)
        // }

        //默认1x是选中样式
        // document.getElementsByClassName('speed')[1].className = 'speed speedsidechoose';

        var videoState = 'pause';
        $('.video-js').on('touchstart', function (e) {
          if ($(e.target).parents('.vjs-control-bar').length > 0) return;
          if (videoState == 'pause') {
            player.play();
            $('.vjs-big-play-button').hide();
            videoState = 'start';
          } else {
            player.pause();
            $('.vjs-big-play-button').show();
            videoState = 'pause';
          }
        });
        $('.video-js').on('touchstart', '.vjs-big-play-button', function (e) {
          e.stopPropagation();
          player.play();
          $('.vjs-big-play-button').hide();
        });
      });
    </script>
  </body>
</html>
